<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <h3>快捷入口</h3>
      </div>
    </template>
    <el-row :gutter="16">
      <el-col v-for="(item, index) in quickActions" :key="index" :span="8">
        <div
          class="quick-action-item"
          @click="handleQuickActionClick(item.url)"
          :style="{ backgroundColor: `${item.color}15`, borderLeftColor: item.color }"
        >
          <div class="quick-action-icon" :style="{ backgroundColor: item.color }">
            <el-icon><component :is="getIcon(item.icon)" /></el-icon>
          </div>
          <div class="quick-action-name">{{ item.name }}</div>
          <div class="quick-action-arrow">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import { ArrowRight } from '@element-plus/icons-vue'

  interface QuickAction {
    name: string
    icon: string
    color: string
    url: string
  }

  interface Props {
    quickActions: QuickAction[]
  }

  const props = defineProps<Props>()
  const router = useRouter()

  // 获取图标组件
  const getIcon = (iconName: string) => {
    // Element Plus 图标名称映射
    const iconMap: Record<string, any> = {
      'pay-circle': ElementPlusIconsVue.CircleCheck,
      'file-done': ElementPlusIconsVue.DocumentChecked,
      'file-add': ElementPlusIconsVue.DocumentAdd,
      user: ElementPlusIconsVue.User,
      'file-text': ElementPlusIconsVue.Document,
      'shopping-cart': ElementPlusIconsVue.ShoppingBag,
      'check-circle': ElementPlusIconsVue.CircleCheck,
      scale: ElementPlusIconsVue.HomeFilled, // 临时替代
      'user-add': ElementPlusIconsVue.User, // 临时替代
      calendar: ElementPlusIconsVue.Calendar,
      edit: ElementPlusIconsVue.Edit,
      document: ElementPlusIconsVue.Document,
    }
    return iconMap[iconName] || ElementPlusIconsVue.User
  }

  // 处理快捷入口点击
  const handleQuickActionClick = (url: string) => {
    if (url) {
      router.push(url).catch(err => {})
    }
  }
</script>

<style scoped lang="scss">
  .content-card {
    margin-bottom: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
  }

  .quick-action-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      transform: translateX(-100%);
      transition: transform 0.5s;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

      &::before {
        transform: translateX(100%);
      }

      .quick-action-arrow {
        transform: translateX(4px);
      }
    }
  }

  .quick-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .quick-action-name {
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    flex: 1;
  }

  .quick-action-arrow {
    color: #909399;
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
</style>
